// 定义一些常用的重复样式
// 文本超出显示省略号
@mixin textEllipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

// 加粗文本大小
@mixin strongFont {
  font-size: 20px;
  font-weight: bold;
}

// 盒阴影
@mixin boxShadow {
  // x偏移量 y偏移量 阴影模糊半径 阴影扩散半径 阴影颜色
  box-shadow: 0 0 10px 5px #f8f8f8f8;
}

// 文字阴影
@mixin textShadow {
  // x偏移量 y偏移量 阴影模糊半径  阴影颜色
  text-shadow: 0 0 10px #f8f8f8f8;
}

// 滤镜内的阴影
@mixin dropShadow {
  //x偏移量 y偏移量 阴影模糊半径 阴影颜色
  filter: drop-shadow(0 0 10px #f8f8f8f8);
  -webkit-filter: drop-shadow(0 0 10px #f8f8f8f8);
}

// 浮雕阴影
@mixin anagShadow {
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}

// 拟态按钮
@mixin NTBtn {
  transition: 0.2s all;
  box-shadow: 7px 7px 12px rgba(0, 0, 0, 0.4), -7px -7px 12px rgba(255, 255, 255, 0.9),
    inset 0 0 0x rgba(255, 255, 255, 0.9), inset 0 0 0 rgba(0, 0, 0, 0.4);

  &:active {
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), 0 0 0 rgba(255, 255, 255, 0.9), inset -7px -7px 12px rgba(255, 255, 255, 0.9),
      inset 7px 7px 12px rgba(0, 0, 0, 0.4);
  }
}
